<script setup>
import { useSettingsStore } from '../../stores/modules/settings'

const settingsStore = useSettingsStore()
</script>

<template>
  <div class="setting-section">
    <h3>API 配置</h3>
    <div class="config-settings">
      <el-form label-position="top">
        <el-form-item label="API 密钥">
          <el-input
            v-model="settingsStore.sensitiveSettings.apiKey"
            type="password"
            placeholder="请输入您的 API 密钥"
            show-password
            class="transparent-input"
          />
        </el-form-item>

        <el-form-item label="模型选择">
          <el-select v-model="settingsStore.settings.model" class="model-selector">
            <el-option label="DeepSeek-V3" value="deepseek-chat" />
            <el-option label="Deepseek-R1" value="deepseek-reasoner" />
          </el-select>
        </el-form-item>

        <el-form-item label="Temperature">
          <div class="temperature-setting">
            <el-slider
              v-model="settingsStore.settings.temperature"
              :min="0"
              :max="1"
              :step="0.1"
              show-input
            />
            <div class="temperature-desc">
              较低的值会使输出更加集中和确定性，较高的值会使输出更加多样化和创造性
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.setting-section {
  margin-bottom: 32px;
}

.setting-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.config-settings {
  max-width: 500px;
}

.model-selector {
  width: 100%;
}

.temperature-setting {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.temperature-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
}


:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-form-item__label) {
  color: var(--el-text-color-regular);
}

:deep(.el-input__wrapper) {
  background-color: var(--el-fill-color-light);
}

:deep(.el-input__inner) {
  color: var(--el-text-color-regular);
}

:deep(.el-select__wrapper) {
  background-color: var(--el-fill-color-light);
}


.api-key-notice {
  margin-top: 8px;
}


</style>
